<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./sass/index.min.css">
    <!-- <link rel="stylesheet" href="./css/swiper.css"> -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2708812_cu20yqiec7.css">
    <script src="https://at.alicdn.com/t/font_2708812_shl5yzs14v.js"></script>
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="./sass/detail.css">
</head>

<body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">
        <div class="w">
            <div class="sl l">
                <a href="./list.html">小米商城</a><span class="sep">|</span>
                <a href="./list.html">MIUI</a><span class="sep">|</span>
                <a href="./list.html">米聊</a><span class="sep">|</span>
                <a href="./list.html">游戏</a><span class="sep">|</span>
                <a href="./list.html">多看阅读</a><span class="sep">|</span>
                <a href="./list.html">云服务</a><span class="sep">|</span>
                <a href="./list.html">金融</a><span class="sep">|</span>
                <a href="./list.html">小米商城移动版</a><span class="sep">|</span>
                <a href="./list.html">问题反馈</a><span class="sep">|</span>
                <a href="./list.html">SelectRegion</a>
            </div>
            <div class="sr r">
                <div class="shopcar r">
                    <a href="./cart.html" target="_blank"> 购物车<span>(0)</span></a>
                </div>
                <div class="regsiter r">
                    <a href="./login.html" class="qdl">登录&emsp;|&emsp;注册 </a>
                    <!-- <a href="./register.html" class="qdl">注册<span class="sep">|</span></a> -->

                    <a>欢迎:&emsp;<a class="ydyh"></a></a>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 快捷导航模块 end -->

    <!-- header头部模块制作 start -->
    <header class="head">
        <div class="w">
            <div class="logo l">
                <a href="mi.com" title="小米商城" class="nav_logo"></a>
            </div>
            <div class="nav l">
                <ul>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="" class="nth">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">红米</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="" class="nth">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">平板·笔记本</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="" class="nth">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">电视</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="" class="nth">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">平板</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="" class="nth">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="" class="nth">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">智能硬件</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="" class="nth">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="serch l">
                <div class="serch_bar cl">
                    <input type="text" class="serch_con" placeholder="红米k40 游戏增强版">
                    <a href="" class="serch_btn"></a>
                    <!-- <ul class="serch_list">
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                        <li>商品</li>
                    </ul> -->
                </div>
            </div>

    </header>
    <!-- header头部模块制作 end -->

    <div class="det_warp">
        <div class="det">
            <h2>产品标题</h2>
            <a href="">详情</a>|
            <a href="">参数</a>|
            <a href="">F码通道</a>|
            <a href="">咨询客服</a>|
            <a href="">用户评价</a>
        </div>

    </div>

    <div class="cp_warp">
        <div class="wrapAll">

            <div class="left">
                <div class="showGoods">
                    <img class="smallImg" src="" alt="">
                    <div class="shadow"></div>
                </div>
                <ul class="showList">
                    <li class="active"><img class="smallImg_4" src="" bigUrl="" alt=""></li>
                    <li><img class="smallImg_1" src="" bigUrl="" alt="">
                    </li>
                    <li><img class="smallImg_2" src="" bigUrl="" alt="">
                    </li>
                    <li><img class="smallImg_3" src="" bigUrl="" alt="">
                    </li>
                </ul>
            </div>
            <div class="right">
                <h3>真无线蓝牙耳机</h3>
                <p>产品描述描述产品描述描述产品描述描述产品描述描述</p>
                <span class="price_r">199元</span>
                <hr>
                <div class="dizhi">
                    <i class="iconfont icon-iconfonticonposition1"></i> 湖北 恩施土家族苗族自治州 恩施市 高坪镇 <a href="">修改</a>
                </div>
                <p class="color">选择套餐</p>
                <span class="bp">标配</span>
                <div class="price">
                    <p><span class="tit_r">耳机耳机</span><span class="price_r_">199元</span></p>
                    <h4>总计:&emsp;<span class="price_r_z">199元</span></h4>
                </div>
                <button class="btn">加入购物车</button>
                <div class="scaleGoods">
                    <img class="bigImg" src="" alt="">
                </div>
            </div>

        </div>
    </div>

    <footer class="footer w">
        <div class="sales">
            <a href="#"><i></i>预约维修服务</a>
            <a href="#"><i></i>7天无理由退货</a>
            <a href="#"><i></i>15天免费换货</a>
            <a href="#"><i></i>满150元包邮</a>
            <a href="#"><i></i>520家售后网点</a>
        </div>
        <div class="dibu">
            <div class="d_nav l">
                <ul>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                </ul>
            </div>
            <div class="tel l">
                <p>400-100-5678</p>
                <p>周一至周五8:00-16:00</p>
                <p>(仅收市话费)</p>
                <span><i></i>小时在线客服</span>
            </div>
        </div>
    </footer>
    <div class="copyright">
        <div class="copy w">
            <div class="copy_logo l clearfix">
                <img src="./images/logo-mi2.png" alt="">
            </div>
            <div class="copy_nav l clearfix">
                <a href="#">小米商城</a><span class="seb">|</span>
                <a href="#">MIUI</a><span class="seb">|</span>
                <a href="#">米家</a><span class="seb">|</span>
                <a href="#">米聊</a><span class="seb">|</span>
                <a href="#">多看</a><span class="seb">|</span>
                <a href="#">游戏</a><span class="seb">|</span>
                <a href="#">政企服务</a><span class="seb">|</span>
                <a href="#">小米天猫店</a><span class="seb">|</span>
                <a href="#">小米集团隐私政策</a><span class="seb">|</span>
                <a href="#">小米公司儿童信息保护规则</a><span class="seb">|</span>
                <a href="#">小米商城用户协议</a><span class="seb">|</span>
                <a href="#">问题反馈</a>
                <span class="seb"> |</span>
                <a href="#">Select Location</a>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                    增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
                    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

            </div>
        </div>
        <p class="copy_p">探索黑科技,小米为发烧而生!</p>

    </div>
</body>
<script src="./js/tool_ajax.js"></script>
<script src="./js/api.js"></script>
<!-- 放大镜 -->
<script>
    // 放大镜的实现步骤
    // 1. 等比例放大  (布局)   => (如何设置)
    //    shadow          smallImg       shadow移动的距离
    // ————————————  =  ————————————  = —————————————————
    //   scaleGoods        bigImg        bigImg移动的距离

    // 2. 左边移动的是shadow 右边移动的是bigImg (布局)
    // 3. shadow移动的距离 和 bigImg移动的距离也是等比例 且是反向的(参照物观念) 

    var liList = document.querySelectorAll(".showList li");


    var maxLeft = null;
    var maxTop = null;
    var sacle = null; // 2.5

    $('.showGoods').onmouseenter = function () {
        $('.shadow').style.display = "block";
        $('.scaleGoods').style.display = "block";

        maxLeft = $('.showGoods').clientWidth - $('.shadow').clientWidth;
        maxTop = $('.showGoods').clientHeight - $('.shadow').clientHeight;
        sacle = $('.bigImg').clientWidth / $('.smallImg').clientWidth; // 2.5
        // console.log($('.bigImg').clientWidth, $('.smallImg').clientWidth);
    }
    $('.showGoods').onmouseleave = function () {
        $('.shadow').style.display = "none";
        $('.scaleGoods').style.display = "none";
    }
    $('.showGoods').onmousemove = function (e) {
        var e = e || window.event;
        var x = e.pageX - this.offsetLeft - $('.shadow').clientWidth / 2;
        var y = e.pageY - this.offsetTop - $('.shadow').clientHeight / 2;

        // 移动之前判断 是否超出临界值 (小于最小值  大于最大值)
        if (x < 0) x = 0;
        if (x > maxLeft) x = maxLeft;
        if (y < 0) y = 0;
        if (y > maxTop) y = maxTop;

        $('.shadow').style.left = x + "px";
        $('.shadow').style.top = y + "px";

        $('.bigImg').style.left = -sacle * x + "px";
        $('.bigImg').style.top = -sacle * y + "px";
    }

    var smallImgList = ["./images/cart-empty.png", "./images/cart-empty.png", "./images/cart-empty.png",
        "./images/cart-empty.png"
    ];
    var bigImgList = ["./images/cart-empty.png", "./images/cart-empty.png", "./images/cart-empty.png",
        "./images/cart-empty.png"
    ];

    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onmouseenter = function () {
            for (let j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            this.className = "active";


            $('.smallImg').src = smallImgList[i];

            $('.bigImg').src = bigImgList[i];

        }
    }

    function getStyle(ele, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }
</script>

<script>
    const user = localStorage.getItem('login_user');
    console.log(user);

    if (user) {
        console.log($('.xx'));
        $('.ydyh').innerHTML = user;
        $('.qdl').style.display = "none"
    }

    const search = location.search.split('?')[1];
    const id = search.split('=')[1]
    console.log(id);

    //加入购物车
    //加入购物车
    $('.btn').onclick = async function (e) {
        const target = e.target

        if (user) {

            const res = await addToCart({
                username: user,
                goods_id: id,
                num: 1,
            })
            console.log(res);
            const {
                status,
                msg,
                data
            } = res
            if (status) {
                alert("成功加入购物车");
            } else {
                alert(msg);
            }


            // getDate(res)
        } else {
            alert("您还没有登录")
            location.href = './login.html'
        }
    }



    //数据渲染
    getDate()
    async function getDate() {

        const res = await Detail_({
            id
        })
        console.log(res);
        const {
            status,
            msg,
            data
        } = res

        $('.smallImg').src = data.img;
        $('h3').innerHTML = data.title;
        $('.tit_r').innerHTML = data.title;
        $('.price_r').innerHTML = data.price;
        $('.price_r_').innerHTML = data.price;
        $('.price_r_z').innerHTML = data.price;

        $('.smallImg_1').src = data.img;
        $('.smallImg_2').src = data.img;
        $('.smallImg_3').src = data.img;
        $('.smallImg_4').src = data.img;

        $('.smallImg_1').bigUrl = data.img;
        $('.smallImg_2').bigUrl = data.img;
        $('.smallImg_3').bigUrl = data.img;
        $('.smallImg_4').bigUrl = data.img;

        $('.bigImg').src = data.img;
    }
</script>

</html>